<template>
  <div>
    <!-- 登录外围框 -->
    <div   v-show="loginshow" class="login-form"  >
      <!-- 提示框 -->
      <div class="Fraud_tis">
        <img src="https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2018-0827/i/icon-tips.png" alt="" class="small_icom">
        <p class="small_tis_p">本网不会以任何理由要求您转账汇款，谨防诈骗。</p>
      </div>
      <!-- 标题 -->
      <div class="title_div">
           <div class="login-title ">
             <span @click="LoginTiBtn()" :class="{'active':loginshow}">登录区</span>
             <!-- <a href="">登录区</a> -->
          </div>
           <div class="Aeg-title ">
             <span @click="AegTiBtn()" :class="{'active':!loginshow}">注册区</span>
             
           </div>
      </div>
      <!-- 中间空白层 -->
      <div class="msg-wrap" v-show="loginTis">
        <div class="tis_icom"></div>
        <p>请正确输入账户名和密码</p>
      </div>
      <!-- 账号框 -->
      <div class="login_input_div">
        <div class="icom_div"></div>
        <input type="text" class="login_acc_input" placeholder="用户名" v-model=" login_acc_input">
      </div>
      <!-- 密码框 -->
       <div class="login_input_div2">
        <div class="icom_div2"></div>
        <input type="password" class="login_pwd_input" placeholder="密码" v-model="login_pwd_input">
      </div>
       <Button type="error" class="loginBtn" @click="loginBtn()">登录</Button>
       <div class="foot_div">
         <div class="QQ_icom"></div>
         <span class="QQ_font">QQ</span>
          <div class="Wx_icom"></div>
         <span class="Wx_font">微信</span>
         <div class="RegisterNow_icom"></div>
         <span class="RegisterNow_font"  @click="AegTiBtn()">立即注册</span>
       </div>
    </div> 
    <!-- 注册区 区 -------------------------------------------------------- -->
    <div   v-show="Aegshow" class="Aeg-form" >
      <!-- 提示框 -->
      <div class="Fraud_tis">
        <img src="https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2018-0827/i/icon-tips.png" alt="" class="small_icom">
        <p class="small_tis_p">本网不会以任何理由要求您转账汇款，谨防诈骗。</p>
      </div>
      <!-- 标题 -->
      <div class="title_div">
           <div class="login-title ">
              <span @click="LoginTiBtn()" :class="{'active2':  !Aegshow}">登录区</span>
          </div>
           <div class="Aeg-title ">
             <span  @click="AegTiBtn()" :class="{'active2':  Aegshow}" >注册区</span>
             <!-- <a href="">注册区</a> -->
           </div>
      </div>
      <!-- 中间空白层 -->
      <div class="Aeg-msg-wrap"  v-show="AegTis"  >
        <div class="Aeg-tis_icom"></div>
        <p>请正确输入输入框内容</p>
      </div>
      <!-- 账号框 -->
      <div class="Aeg_input_div">
        <div class="icom_div"></div>
        <input type="text" class="Aeg_acc_input" placeholder="用户名" v-model="Aeg_acc_input">
      </div>
      <!-- 密码框 -->
       <div class="Aeg_input_div2">
        <div class="icom_div2"></div>
        <input type="password" class="Aeg_pwd_input" placeholder="密码" v-model="Aeg_pwd_input">
      </div>
        <!-- 确认密码框 -->
       <div class="Aeg_input_div3">
        <div class="icom_div2"></div>
        <input type="password" class="Aeg_pwd_input2" placeholder="确认密码" v-model="Aeg_pwd_input2">
      </div>
        <!-- 手机号码框 -->
       <div class="Aeg_input_div4">
        <div class="icom_div2"></div>
        <input type="text" class="Aeg_phone_input" placeholder="手机号" v-model="Aeg_phone_input" >
      </div>
      <!-- 验证码区 -->
       <div class="Aeg_input_div5">
        <div class="icom_div2"></div>
        <input type="text" class="Aeg_Code_input" placeholder="验证码" v-model="Aeg_Code_input">
      </div>
      <div class="Code_Box" @click="CodeBox()">点击此处验证码</div>
      <!-- 验证码提示区 -->
        <div class="Aeg-Code-msg-wrap"  v-show="AegCodetis">
        <div class="Aeg_Code_tis_icom"></div>
        <p>输入的验证码内容有误</p>
      </div>
      <!-- 注册按钮 -->
      <Button type="error" class="AegBtn" @click="AegBtn()">注册</Button>
       <div class="foot_div">
         <div class="QQ_icom"></div>
         <span class="QQ_font">QQ</span>
          <div class="Wx_icom"></div>
         <span class="Wx_font">微信</span>
         <div class="RegisterNow_icom"></div>
         <span class="LoginisterNow_font"  @click="LoginTiBtn()">立即登录</span>
       </div>
    </div> 
  </div>
  

  </div>

</template>
<script>


export default {
  data() {
    return {
        loginshow:true,//登录区显示
        Aegshow:false,//注册区显示

        loginTis:false,//登录区输入框的提示

        AegTis:false,//注册区输入框的提示
        AegCodetis:false,//注册验证码的提示

        login_acc_input: "",//登录区账号输入框
        login_pwd_input:"",//登录区密码输入框

        Aeg_acc_input:"",//注册区账号输入框
        Aeg_pwd_input:"",//注册区密码输入框
        Aeg_pwd_input2:"",//注册区确认密码输入框
        Aeg_phone_input:"",//注册区手机号码输入框
        Aeg_Code_input:""//注册区验证码输入框
    };
  },
  methods: {
    //点击登录的按钮
    loginBtn(){
      // this.loginTis = true;

    },
    AegBtn(){


    },
    //点击注册的按钮

    //点击登录区文字切换
    LoginTiBtn(){

       this.loginshow = true
        this.Aegshow = false
    },
    //点击注册区文字切换
    AegTiBtn(){
       this.Aegshow = true
      this.loginshow = false

    },
    //验证码区
    CodeBox(){

      var codeflag;

       var codeText = document.getElementsByClassName('Code_Box')[0];//储存验证码的盒子
      //验证码可以有哪些数
      //
      var codeArr = '23456789qwertyupasdfghjklzxcvbnmQWERTYUPASDFGHJKLZXCVBNM';//这些数随机选择

        
      // 声明一个盒子装验证码
      // 
       var codebox = '';
       // 盒子装四位的验证码,随机选择
       // 
       for(var i=0;i<4;i++){

          codebox+= codeArr[parseInt(Math.random()*codeArr.length)];
       }
       //之后打印在出验证码的框上
       //
       codeText.innerHTML=codebox;
        codeText.style.color = 'rgb(' + parseInt(Math.random() * 255) + ',' + parseInt(Math.random() * 255) + ',' + parseInt(Math.random() * 255) + ')';
        codeText.style.fontSize = parseInt(Math.random() * 10 + 10) + 'px';//颜色和字号随机

        codeflag = 1; //出现验证码后，将状态标1
      
    }

   
  }
}
</script>

<style>
*{
  margin: 0px;
  padding: 0px;
}
li{
  list-style: none;
}
a{
  text-decoration: none;
}
.active{
  color:red;
}
.active2{
  color:red;
}
.login-form{
  width: 380px;
  height:408px;
  /* border:1px solid blue; */
  /* background-color: red; */
  margin: 0 auto;
  box-shadow: 0 4px 15px rgba(0,147,255,0.2)
}
.Fraud_tis{
  width: 348px;
  height: 22px;
  float: left;
  margin-top: 10px;
}
.small_icom{
  margin-left: 15px;
  float: left;
  
}
.small_tis_p{
  float:left;
  margin-left: 5px;
}
/* 标题框 */
.title_div{
  width: 350px;
  height: 54px;
  float: left;
   color: #666;
}
/* 登录标题 */
.login-title {
  width: 173px;
  height: 54px;
  text-align: center;
  float: left;
  line-height: 54px;
  color: #666;
}
.login-title a{
     color: #666;
}
/* 注册标题 */
.Aeg-title{
  width: 175px;
  height: 54px;
  text-align: center;
  float: left;
   line-height: 54px;
  
}
.Aeg-title a{
   color: #666;

}
/* 登录中间空白提示层 */
.msg-wrap{
  width: 309px;
    height: 30px;
    min-height: 23px;
    margin-top: 5px;
    margin-bottom: 5px;
    height: auto!important;
    float: left;
    margin-top: 8px;
    border: 1px solid blue;
    color: #e4393c;
    border: 1px solid #faccc6;
    background: #ffebeb;
    margin-left: 36px;
}
/* 登录提示图标 */
.tis_icom{
    width: 19px;
    height: 18px;
    float: left;
    background-image: url(https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2018-0827/i/pwd-icons-new.png);
    background-position: -104px -49px;
    background-repeat: no-repeat;
    margin-left: 9px;
    margin-top: 4px;
}
/* 登录提示文字 */
.tis_icom p{
  float: left;
  font-size: 14px;
}
/* 登录账号大的DIV */
.login_input_div{
     width: 310px;
    height: 40px;
    border: 1px solid #bdbdbd;
    float: left;
    margin-left: 36px;
}
/* 人头图标 */
.icom_div{
    width: 40px;
    height: 39px;
    border-color: #e4393c;
    background-image: url(https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2018-0827/i/pwd-icons-new.png);
    background-position: 0px -48px;
    float: left;
    border: 1px solid  #bdbdbd;
    font-weight: 100;
}
/* 登录账号输入框 */
.login_acc_input{
  width: 268px;
    height: 39px;
    float: left;
}
/* 登录密码输入框的大DIV */
.login_input_div2{
      width: 310px;
    height: 40px;
    border: 1px solid #bdbdbd;
    float: left;
    margin-left: 36px;
    margin-top: 15px;
}
/* 锁图标 */
.icom_div2{
    width: 40px;
    height: 39px;
    border-color: #e4393c;
    background-image: url(https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2018-0827/i/pwd-icons-new.png);
    background-position: -47px -49px;
    float: left;
    border: 1px solid  #bdbdbd;
    font-weight: 100;
}
/* 登录密码输入框 */
.login_pwd_input{
    width: 268px;
    height: 39px;
    float: left;
}
/* 登录按钮 */
.loginBtn{
 width: 304px;
    height: 33px;
    border: 1px solid #e85356;
    background: #e4393c;
    letter-spacing: 13px;
    color: #fff;
    margin-left: 40px;
    margin-top: 60px;
}
/* 底部框 */
.foot_div{
  width: 342px;
    height: 45px;
    margin-left: 19px;
    margin-top: 50px;
    float: left;
}
/* QQ图标 */
.QQ_icom{
  width: 20px;
    height: 20px;
    background-image: url(https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2018-0827/i/QQ-weixin.png);
    background-repeat: no-repeat;
   margin-left: 19px;
    margin-top: 14px;
    float: left;

}
/* QQ文字 */
.QQ_font{
 margin-left: 1px;
    margin-top: 13px;
    float: left;
}
/* 微信图标 */
.Wx_icom{
 width: 20px;
    height: 20px;
    background-image: url(https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2018-0827/i/QQ-weixin.png);
    background-repeat: no-repeat;
    margin-left: 82px;
    margin-top: 12px;
    float: left;
    background-position: -19px 2px;

}
/* 微信文字 */
.Wx_font{
margin-left: 5px;
    margin-top: 12px;
    float: left;
  
}
/* 立即注册图标 */
.RegisterNow_icom{
 width: 45px;
    height: 26px;
    background-image: url(https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2018-0827/i/pwd-icons-new.png);
    background-repeat: no-repeat;
   margin-left: 34px;
    margin-top: 12px;
    float: left;
    background-position: -86px -72px;

}
/* 立即注册文字 */
.RegisterNow_font{
 margin-left: -3px;
    margin-top: 12px;
    float: left; 
}
/* 注册区 */
.Aeg-form{
  width: 380px;
  height:600px;
  margin: 0 auto;
  box-shadow: 0 4px 15px rgba(0,147,255,0.2)
}
/* 注册账号输入框大的DIV */
.Aeg_input_div{
     width: 310px;
    height: 40px;
    border: 1px solid #bdbdbd;
    float: left;
    margin-left: 36px;
}
/* 注册账号输入框 */
.Aeg_acc_input{
  width: 268px;
    height: 39px;
    float: left;
}
/* 注册密码输入框的大DIV */
.Aeg_input_div2{
      width: 310px;
    height: 40px;
    border: 1px solid #bdbdbd;
    float: left;
    margin-left: 36px;
    margin-top: 15px;
}
/* 注册密码框 */
.Aeg_pwd_input{
  width: 268px;
    height: 39px;
    float: left;
}
/* 注册确认密码输入框的大DIV */
.Aeg_input_div3{
      width: 310px;
    height: 40px;
    border: 1px solid #bdbdbd;
    float: left;
    margin-left: 36px;
    margin-top: 15px;
}
/* 注册确认密码输入框 */
.Aeg_pwd_input2{
  width: 268px;
    height: 39px;
    float: left;
}
/* 注册手机号码输入框的大DIV */
.Aeg_input_div4{
      width: 310px;
    height: 40px;
    border: 1px solid #bdbdbd;
    float: left;
    margin-left: 36px;
    margin-top: 15px;
}
/* 注册手机号码输入框 */
.Aeg_phone_input{
  width: 268px;
    height: 39px;
    float: left;
}

 /* 注册验证码输入框的大DIV  */
.Aeg_input_div5{
      width: 172px;
    height: 40px;
    border: 1px solid #bdbdbd;
    float: left;
    margin-left: 36px;
    margin-top: 15px;
}
/* 注册验证码输入框 */
.Aeg_Code_input{
  width: 130px;
    height: 39px;
    float: left;
}
.Code_Box{
 width: 133px;
    height: 39px;
    float: left;
   border: 1px solid #bdbdbd;
    margin-left: 5px;
    margin-top: 16px;
    text-align: center;
    line-height: 39px;
}
/* 注册区验证码错误提示 */


/* 注册区验证码中间空白提示层 */
.Aeg-Code-msg-wrap{
  width: 309px;
    height: 30px;
    min-height: 23px;
    margin-top: 5px;
    margin-bottom: 5px;
    height: auto!important;
    float: left;
    margin-top: 8px;
    border: 1px solid blue;
    color: #e4393c;
    border: 1px solid #faccc6;
    background: #ffebeb;
    margin-left: 36px;
}
/* 提示图标 */
.Aeg_Code_tis_icom{
         width: 19px;
    height: 18px;
    float: left;
    background-image: url(https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2018-0827/i/pwd-icons-new.png);
    background-position: -104px -49px;
    background-repeat: no-repeat;
    margin-left: 9px;
    margin-top: 4px;
}
/* 提示文字 */
.Aeg_Code_tis_icom p{
  float: left;
  font-size: 14px;
}
 /* 立即登录文字  */
.LoginisterNow_font{
 margin-left: -3px;
    margin-top: 12px;
    float: left; 
}
/* 注册按钮 */
.AegBtn{
 width: 304px;
    height: 33px;
    border: 1px solid #e85356;
    background: #e4393c;
    letter-spacing: 13px;
    color: #fff;
    margin-left: 40px;
    margin-top: 15px;
}
 

 /* 注册区输入框内容提示 */
 .Aeg-msg-wrap{
  width: 309px;
    height: 30px;
    min-height: 23px;
    margin-top: 5px;
    margin-bottom: 5px;
    height: auto!important;
    float: left;
    margin-top: 8px;
    border: 1px solid blue;
    color: #e4393c;
    border: 1px solid #faccc6;
    background: #ffebeb;
    margin-left: 36px;
}
/* 登录提示图标 */
.Aeg-tis_icom{
    width: 19px;
    height: 18px;
    float: left;
    background-image: url(https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2018-0827/i/pwd-icons-new.png);
    background-position: -104px -49px;
    background-repeat: no-repeat;
    margin-left: 9px;
    margin-top: 4px;
}
/* 登录提示文字 */
.Aeg-tis_icom p{
  float: left;
  font-size: 14px;
}

</style>